<template>
    <!-- 插槽 -->
    <div v-if="slots.table" class="table-content table-slots">
        <slot :table-data="tableData" name="table"> </slot>
    </div>
    <div v-else class="table-content table-default">
        <div class="table-search">
            <ZWSearch v-model="searchForm" @search="search" />
        </div>
        <div class="table-list">
            <ZWTable :data-list="tableData" :table-options="tableOptions" />
        </div>
        <div class="table-pagination">
            <ZWPagination ref="paginationRef" v-model="paginationForm" :total="form.total" @change="search" />
        </div>
    </div>
</template>

<script setup lang="tsx">
import { ref, watch, onMounted, useSlots, nextTick } from 'vue';
import type { PropType } from 'vue';
import { TypeFetchApi, TypeZWPaginationExpose } from '../type';
import { type } from '../../../utils/index';
import ZWSearch from './ZWSearch.vue';
import ZWTable from './ZWTable.vue';
import ZWPagination from './ZWPagination.vue';

const slots = useSlots();
const paginationRef = ref<null | (InstanceType<typeof ZWPagination> & TypeZWPaginationExpose)>(null);

const tableData = ref<any[]>([]);
const form = ref<any>({
    total: 0
});
const searchForm = ref<any>({});
const paginationForm = ref<any>({});

interface PropsType {
    modelValue: Array<any>;
    groupId: number | string;
    searchOptions: Array<any>;
    tableOptions: Array<any>;
    fetchApi: PropType<TypeFetchApi | Array<any>>;
}

const props = withDefaults(defineProps<PropsType>(), {
    modelValue: () => [],
    groupId: 0,
    searchOptions: () => [],
    tableOptions: () => [],
    fetchApi: () => []
});

const emits = defineEmits<{
    (e: 'update:modelValue', id: number | string): void;
}>();

watch(
    () => props.groupId,
    () => {
        nextTick(async () => await getTableData());
    }
);

/**
 * @description: 查询事件处理
 * @param {*} form
 * @param {*} flag
 * @return {*}
 */
const search = async (form: any, flag?: boolean) => {
    if (flag) {
        paginationRef.value?.reset();
    }
    await getTableData();
};

/**
 * @description: 获取table数据
 * @return {*}
 */
const getTableData = async () => {
    if (!type.isFunction(props.fetchApi) && !type.isPromise(props.fetchApi) && !type.isArray(props.fetchApi)) return;
    let params: any = getParams();
    let fetchApi: any = props.fetchApi;
    if (type.isPromise(fetchApi)) fetchApi = await fetchApi;
    if (type.isArray(fetchApi)) {
        const [extra, fetch] = fetchApi;
        params = { ...extra, ...params };
        fetchApi = fetch;
    }
    const res = (await fetchApi?.(params)) ?? {};
    form.value.total = res.total;
    tableData.value = res.data;
};

/**
 * @description: 获取查询接口参数
 * @return {*}
 */
const getParams = () => {
    const group_id = props.groupId;
    return { ...searchForm.value, ...paginationForm.value, group_id };
};

onMounted(async () => {
    await getTableData();
});
</script>

<style lang="scss" scoped>
.table-content {
    // background-color: pink;
}

.table-slots {
}

.table-default {
    height: 100%;
    display: flex;
    flex-direction: column;

    .table-search {
    }

    .table-list {
        flex: 1;
    }

    .table-pagination {
    }
}
</style>
